<template>
	<div class="drawing-container">
	    <div id="tui-image-editor"></div>
	  </div>
</template>

<script>
	import 'tui-image-editor/dist/tui-image-editor.css'
	import 'tui-color-picker/dist/tui-color-picker.css'
	import ImageEditor from 'tui-image-editor'
	
	export default {
	  data() {
	    return {
	      instance: null,
	    }
	  },
	  mounted() {
	    this.init();
	  },
	  methods: {
	    init() {
			let _this = this
	      this.instance = new ImageEditor(
	        document.querySelector("#tui-image-editor"),
	        {
	          includeUI: {
	            loadImage: {
	              path: require('../../assets/image/cardmodle.jpg'), // 替换为你的图片地址
	              name: "image",
	            },
				menu: ['shape', 'filter'],
	            initMenu: "shape", // 默认打开的菜单项
	            menuBarPosition: "bottom", // 菜单所在的位置
				locale:"locale_zh",//文字汉化
				uiSize:{
					width:window.innerWidth+'px',
					height:window.innerHeight+'px'
				},
				menuBarPosition:'right'
	          },
	          cssMaxWidth: window.innerWidth, // canvas 最大宽度
	          cssMaxHeight: window.innerHeight, // canvas 最大高度
			  selectionStyle: {
			      cornerSize: 20,
			      rotatingPointOffset: 70
			    }
	        }
	      );
		  _this.instance.on('mousedown', function(event, originPointer) {
		      //console.log(event);
		      //console.log(originPointer);
		      if (_this.instance.hasFilter('colorFilter')) {
		          _this.instance.applyFilter('colorFilter', {
		              x: parseInt(originPointer.x, 10),
		              y: parseInt(originPointer.y, 10)
		          });
		      }
		  });
		  // _this.instance.on('objectActivated', function(props) {
		  //     //console.log(props);
		  //     //console.log(props.type);
		  //     //console.log(props.id);
		  // });
		  // this.instance.on('selectionChange', (selection) => {
		  //   if (selection) {
		  //           const { x, y, width, height } = selection.get();
		  //           //console.log(`X: ${x}, Y: ${y}, Width: ${width}, Height: ${height}`);
		  //         }
		  // });
	      // document.getElementsByClassName("tui-image-editor-main")[0].style.top = "45px"; // 图片距顶部工具栏的距离
	    },
	  },
	}
</script>

<style scoped>
.drawing-container {
  height: 900px;
}
</style>